<template>
  <view class="container">
    <view class="bor-box" >
      <up-status-bar></up-status-bar>
			<view class="" style="height: 60rpx;">

				</view>
      <view class="page-tab-box">

        <view class="" v-for="(item,index) in tabList" :key='index'
              :class="tabIndex == index ? 'tab-item' : 'tab-item-select' " @click="chanegTab(index)">
          {{ item }}
        </view>
      </view>
    </view>

    <view v-if="!dataList.length" class="page-list" style="border-radius:32rpx 32rpx 0 0;margin-top:-50rpx ;background-color: #f8f8f8">
    	<empty ></empty>
    </view>
    <up-status-bar></up-status-bar>
<!-- <view style="height: 88rpx"></view> -->
    <view class="page-list" v-for="(item,index) in dataList" :key='index' @click="toDetails(item)" :style="index == 0 ?  'border-radius:32rpx 32rpx 0 0;margin-top:-50rpx' : '' ">
      <view class="l_f_r_sb_c">
        <view class="list-top">
          <image :src="(tabIndex == 1 ? userInfo.head : item.user.head) || $defaultAvatar" mode="aspectFill"></image>
          <view class="">
            <view class="top-name">
              {{ tabIndex == 1 ? userInfo.nickname : item.user.nickname }}
            </view>
            <view class="top-time">
              <uni-dateformat :date="item.CreatedAt" :format="'yyyy-MM-dd hh:mm'"
                              :threshold="[60000,60*1000*60]"></uni-dateformat>
            </view>
          </view>
        </view>
        <view class="state text_4_24 text_w" v-if="item.state==2">审核失败</view>
        <view class="state state1 text_4_24 text_w" v-if="item.state==0">审核中</view>
      </view>

      <view class="list-content">
        {{ item.brief }}
      </view>

      <view class="list-img" v-if="item.imgurl.length >0">
        <template
            v-for="(ite,i) in item.imgurl"
        >
          <image v-if="i<3" :src="ite" mode="aspectFill"></image>
        </template>
      </view>

      <view class="list-img" v-if="item.videoList.length >0">
        <template
            v-for="(ite,i) in item.videoList"
        >
<!--      #ifndef APP-PLUS    -->
          <video class="list-video" ref="videoRef"  :show-center-play-btn='false' :show-play-btn='false' :show-fullscreen-btn='false' :controls='false' :src="ite" @play="toVideo(ite)"></video>
<!--      #endif    -->
<!--     #ifdef APP-PLUS     -->
        <videoImg class="list-video"  ref="videoRef"  :src="ite"></videoImg>
<!--#endif -->
        </template>
      </view>


      <view class="list-bottom">
        <view class="bottom-box">
<!--          <image src="https://pili-vod.guanxikeji.com/fubao/img/1755660273565.png" mode="widthFix"></image>-->
          <uni-icons color="#333" size="15" type="heart"></uni-icons>
          <view class="">
            {{ item.thumbs_up || 0 }}
          </view>
        </view>
        <view class="bottom-box">
          <image src="https://pili-vod.guanxikeji.com/fubao/img/1755668033039.png" mode="widthFix"></image>
          <view class="">
            0
          </view>
        </view>
        <view class="bottom-box">
          <image src="https://pili-vod.guanxikeji.com/fubao/img/1755314589887.png" mode="widthFix"></image>
          <view class="">
            {{ item.comment_count || 0 }}
          </view>
        </view>
      </view>
    </view>


    <image class="up-icon" src="https://img.fubaozx.cn/static/newImg/img_05.png" mode="widthFix"
           @click="toSocial"></image>
    <view class="" style="padding: 30rpx;">
      <u-skeleton :loading="loading" avatar rows="5"></u-skeleton>
    </view>
  </view>
</template>

<script setup>
import {getCurrentInstance, ref} from "vue";
import {onLoad} from "@dcloudio/uni-app";
import Empty from "@/components/empty.vue";
import videoImg from "@/components/videoImg.vue";

const tabIndex = ref(0)
const tabList = ref(['最新动态', '我的动态'])
const {proxy} = getCurrentInstance();
const dataList = ref([])
const userInfo = ref('')
const userImgList = ref([])
const loading = ref(false)

onLoad(() => {
  getDataList()
  userInfo.value = uni.getStorageSync('userInfo')
})

function getDataList() {
  loading.value = true
  proxy.$request({
    url: `api/getArticleList/?page=1&size=50`,
    method: 'get',
    success(res) {
      // dataList.value = res.data.data
      // loading.value = false

      for (let item of res.data.data) {
        item.imgurl = item.img ? item.img.split(',') : [];
        item.videoList = item.video ? item.video.split(',') : [];
      }
      console.log(res.data.data)
      dataList.value = res.data.data
      loading.value = false
    }
  })
}


function chanegTab(index) {
  tabIndex.value = index
  dataList.value = []
  if (index == 0) {
    getDataList()
  } else {
    getMydata()
  }
}

function getMydata() {
  loading.value = true
  proxy.$request({
    url: `api/publishArticle/?page=1&size=50`,
    method: 'get',
    success(res) {
      for (let item of res.data.data) {
        item.imgurl = item.img ? item.img.split(',') : [];
        item.videoList = item.video ? item.video.split(',') : [];
      }
      console.log(res.data.data)
      dataList.value = res.data.data
      loading.value = false
    }
  })
}

function onPlay(e, index) {
  const video = uni.createVideoContext('myVideo' + index, this);
  // 立即进入全屏
  video.requestFullScreen({direction: 0});
}

function toSocial() {
  uni.navigateTo({
    url: '/pages/community/issue'
  })
}

function toDetails(item) {
  uni.navigateTo({
    url: `/pages/community/details?id=${item.ID}&code=${tabIndex.value}`
  })
}


function toVideo(url) {
  uni.navigateTo({
    url: `/pages/community/video?url=${url}`
  })
}


</script>

<style lang="scss" scoped>
page {
  background-color: #F8F8F8;
}
.bor-box{
	background-image: url('https://img.fubaozx.cn/static/newImg/img_04.png');
	height: 238rpx;
	background-size: 100% 100%;

}
.page-tab-box {
	width: 492rpx;
	height: 68rpx;
	background: #FFF6E9;
	border-radius: 40rpx;
	border: 1rpx solid #E4D7C5;
  display: flex;
  align-items: center;
  justify-content: space-between;

	margin: auto;

  // box-shadow: 0px 8rpx 20rpx 0px #F6F6F6;
  // margin-bottom: 10rpx;

  .tab-item {
    width: 240rpx;
    height: 56rpx;
    background: #FFFFFF;
    border-radius: 40rpx ;
		font-weight: bold;
		font-size: 28rpx;
		color: #000000;
		text-align: center;
		line-height: 56rpx;
  }

  .tab-item-select {
    width: 240rpx;
    height: 56rpx;
    border-radius: 40rpx;
		font-weight: 500;
		font-size: 28rpx;
		color: #2D2D2D;
		text-align: center;
		line-height: 56rpx;
  }
}

.page-list {
  padding: 28rpx 30rpx;
  background-color: #fff;
	margin-bottom: 20rpx;
  .list-top {
    display: flex;
    align-items: center;

    image {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      margin-right: 16rpx;
    }

    .top-name {
      font-size: 28rpx;
      color: #000;
    }

    .top-time {
      font-weight: 400;
      font-size: 24rpx;
      color: #8F8F8F;
      margin-top: 10rpx;
    }
  }

  .list-content {
    font-weight: 400;
    font-size: 28rpx;
    color: #2d2d2d;
    margin-top: 20rpx;
    margin-bottom: 24rpx;
  }

  .list-img {
    display: flex;
    flex-wrap: wrap;
    gap: 10rpx;
    justify-content: space-between;

    image {
      width: 220rpx;
      height: 220rpx;
    }

    .list-video {
      width: 220rpx;
      height: 220rpx;
    }
  }

  .list-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 42rpx;
    margin-top: 32rpx;
    font-size: 24rpx;
    color: #7B7B7B;

    .bottom-box {
      display: flex;
      align-items: center;

      image {
        width: 36rpx;
        height: 36rpx;
      }
    }
  }
}

.up-icon {
  width: 88rpx;
  height: 88rpx;
  border-radius: 50%;
  position: fixed;
  bottom: 200rpx;
  right: 30rpx;
}

.state {
  background: rgb(255, 121, 121);
  padding: 2rpx 10rpx;
  border-radius: 5rpx;

  &.state1 {
    background-color: grey;
  }
}
.top_bar{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}
</style>
